
<template>
  <div id="confirmOrder">
    <div v-if="bussDataDetail.type == 'real'" class="tip-desc">
      温馨提示：2018.09.01起，邮管局通知：所有快递物流信息上的收件人以及寄件人信息禁止出现X先生/X小姐等字样，务必实名填写。请您实名填写收件信息，否则不予发货，谢谢配合！
    </div>
    <div class="top">
      <div v-if="bussDataDetail.type == 'real'" class="one" @click="JumpAddress">
        <img v-if="this.detail.phone&&bussDataDetail.type == 'real'" class="img1" src="../../../wechat/static/images/dzyhzx_shdz.png" alt>
        <p>
          <span class="name">{{detail.name}}</span>
          <span class="phone">{{detail.phone}}</span>
          <span  class="address">{{detail.address}}</span>
        </p>
        <img v-if="this.detail.phone" class="img2" src="../../../wechat/static/images/dzyhzx_next.png" alt>
      </div>
      <div class="two">
        <img :src="detail.img" alt>
        <div class="detail">
          <p>{{detail.title}}</p>
          <span>{{"￥"+detail.money}}</span>
        </div>
      </div>
      <div v-if="detail.money" class="three" style="margin-top:0">
        数量：
        <span class='btnBox'>
           <span class="add" @click='add'>
              +
            </span>
            <span class='number'>
              {{number}}
            </span>
             <span class='reduce' @click='reduce'>
              -
            </span>
            
          </span>
      </div>
      <div v-if="bussDataDetail.type == 'real'" class="three">
        运费：
        <span v-if="number<bussDataDetail.pinkageTerm">
           ￥{{bussDataDetail.freight}}
        </span>
        <span v-else>包邮</span>
      </div>
      <div class="four" v-if="goodtype=='real'">
        <div  v-if="bussDataDetail.deliveryTime != '配送日'" class="deliveryDate">
         配送日期
          <span class="deliveryDate-span" @click='openPicker'>
            {{ddate}}
            <img class="img" src="../../../wechat/static/images/dzyhzx_next.png" alt>
          </span>
          <mt-datetime-picker
            ref="picker"
            type="date"
            :startDate='startDate'
            :value='valueDay'
            @confirm="handleConfirm"
            >
          </mt-datetime-picker>
        </div>
        <div  v-if="bussDataDetail.deliveryTime != '配送日'"   class="deliveryDate">
          配送时间
           <select v-model="startTime" style="float:right;margin-top:10px" name="" id="">
            <option style="display:none" value=""></option>
            <option v-for="(item,index) in dateArr" :key="index" :value="item">{{item}}</option>
         </select>
        </div>
        <div class="deliveryDate"  v-if="bussDataDetail.deliveryTime == '配送日'" >
          配送时间
         <select v-model="deliveryDay" style="float:right;margin-top:10px" name="" id="">
           <option style="display:none" value=""></option>
            <option value ="仅工作日配送">仅工作日配送</option>
            <option value ="仅周末配送">仅周末配送</option>
            <option value ="都可">都可</option>
         </select>
        </div>
      </div>
      <div v-if="goodtype=='real'" class="deliveryTime">
        <div class="deliveryTime-name">备注：</div>
        <textarea   v-model="dtime" placeholder="建议留言前先与商家沟通确认"></textarea>
      </div>
    </div>
    <div class="bottom">
      <p>
        总计：
        <span>{{"￥"+totalMoney}}</span>
      </p>
      <a href="javascript:;" @click="showPay">提交订单</a>
    </div>

    <div class="confirmOrder" v-show="showCoupon">
      <div class="mask" @click="showCoupon = false"></div>
      <div class="content">
        <div class="coupon">
          <h3 @click="showCoupon = false">
            <!-- <img @click="showCoupon = false" src="../../../wechat/static/images/tc_sc.png" alt> 可使用的乐福卡券 -->
            <span>X</span> 可使用的乐福卡券
          </h3>
          <div class="one" v-for="(item, index) in Clist" :key="index" @click="chooseC(item,index)">
            <div class="item">
              <img src="../../../wechat/static/images/kq_bg.png" alt>
              <div class="left">
                <p>
                  <span class>￥</span>
                  <span class="money">{{item.useMoney}}</span>
                  <span class="balance">（剩余可用）</span>
                </p>
                <p>有效期至{{item.date}}</p>
              </div>
              <div class="right">
                <span>乐福卡</span>
                <span>总金额:￥{{item.totalMoney}}</span>
              </div>
            </div>
            <span class="cover-img"></span>
            <img v-if="cchooseindexArr.indexOf(index) >-1" src="../../../wechat/static/images/radio.svg" alt>
            <img v-else src="../../../wechat/static/images/radio02.svg" alt>
          </div>
          <load-more :show-loading="false" tip="暂无更多数据" v-show="Clist.length == 0&&isloading" background-color="#fbf9fe"></load-more>
        </div>
        <div class="btn">
          <a href="javascript:;" @click="Cclick">确定</a>
          <a href="javascript:;" @click="CclickCancel">取消</a>
        </div>
      </div>
    </div>
    <div class="hide moneyPayHide" v-show="showMoneyPay">
      <div class="mask" @click="showMoneyPay=false"></div>
      <div class="content">
        <div class="one" @click="showMoneyPay=false">
          <!-- <img @click="showMoneyPay=false" src="../../../wechat/static/images/tc_sc.png" alt> 需支付 -->
          <span>X</span> 需支付
        </div>
        <div class="two">
          <h2>￥{{totalMoney}}</h2>
          <p class="balance clear">
            <span>余额</span>
            <span>￥{{yudian}}</span>
          </p>
          <p class="notEnough" v-if="payPrice>0">
            余额可支付金额不足还需
            <img src="../../../wechat/static/images/wx.png" alt> 微信支付￥{{payPrice}}
          </p>
          <p class="notEnough" v-else>
            你的余额可支付该商品
            <!-- <img src="../../../wechat/static/images/wx.png" alt=""> 微信支付￥900 -->
          </p>
          <div>
            <a href="javascript:;" @click="payM">确定</a>
            <a href="javascript:;" @click="showMoneyPay=false">取消</a>
          </div>
        </div>
      </div>
    </div>
    <div class="hide couponPayHide" v-show="showCouponPay">
      <div class="mask" @click="showCouponPay=false"></div>
      <div class="content">
        <div class="one" @click="showCouponPay=false">
          <!-- <img @click="showCouponPay=false" src="../../../wechat/static/images/tc_sc.png" alt> 需支付 -->
          <span>X</span>  需支付
        </div>
        <div class="two">
          <h2 v-if="payPrice>0&&cchooseindexArr.length>0">卡券支付金额不足还需微信支付￥{{payPrice}}</h2>
          <h2 v-else-if='cchooseindexArr.length>0&&payPrice==0'>卡券支付金额可支付该商品</h2>
          <h2 v-else-if='cchooseindexArr.length==0&&payPrice>0'>{{"￥"+payPrice}}</h2>
          <p class="notEnough" v-if="payPrice>0||cchooseindexArr.length==0">
            <img src="../../../wechat/static/images/wx.png" alt> 微信支付
            <span>￥{{payPrice}}</span>
          </p>
          <div>
            <a href="javascript:;" @click="pay(1)">确定</a>
            <a href="javascript:;" @click="showCouponPay=false">取消</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XDialog, Popup, Group, LoadMore } from "vux";
export default {
  name: "confirmOrder",
  data() {
    return {
      Clist: [],
      detail: {
        name:  '', // 收货人
        phone:  '', //收货人mobile
        address:  '', //地址
        provinceCode:  '', // 收货人
        cityCode: '', //收货人mobile
        districtCode: '', //地址
        img: "",
        title: "",
        money: "",
        id: ""
      },
      startTime:'',
      options3: ['A', 'B', 'C'],
      totalMoney: "",
      showCoupon: false,
      showMoneyPay: false,
      showCouponPay: false,
      payWXMoney: "",
      bussDataDetail: "",
      cchooseindexArr: [],
      couponidArr: [],
      postCList:[],
      yudian: "",
      payPrice: "",
      payType: "",
      isloading: false,
      goodtype: '',
      isOn:'',
      ddate:'选择配送日期',
      dtime:'',
      valueDay: '',
      model: '',//规格型号
      startDate:'',
      number: parseInt(localStorage.getItem('buy_number'))||'',
      deliveryTime:'',
      deliveryDay:'',
      state:true,
      dateArr:['09:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00','13:00-14:00','14:00-15:00','15:00-16:00','16:00-17:00','17:00-18:00','18:00-19:00','19:00-20:00','20:00-21:00','21:00-22:00','22:00-23:00'],
      userId: localStorage.getItem("userId")||'' //所属用户id
    };
  },
  mounted() {
    this.detail.id = this.$route.query.id;
    this.model = localStorage.getItem('buy_model')
    this.configSet()
    this.getDetail();
    this.getAList();
    this.ddate=this.valueDay = this.$common.getToDayDate(2)
    this.startDate = new Date(this.valueDay)
  },
  created() {},
  methods: {
    configSet(){
      var pageUrl = window.location.href
      let url = `${this.$CONSTANT.WX.indexJsRequire}?url=${pageUrl}`;
      this.$common.post(url, {}, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: [
                        "checkJsApi", //判断当前客户端版本是否支持指定JS接口
                        "previewImage",
                        "onMenuShareTimeline", //分享到朋友圈
                        "onMenuShareAppMessage", //分享给朋友
                        "openLocation",
                        "getLocation",
                        "scanQRCode",
                        "chooseWXPay"
                    ] // 必填，需要使用的JS接口列表
            });
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: "auto"
            });
          }
        });
    },
    add(){
      let numberMax = this.bussDataDetail.restNum
      this.number=(this.number==numberMax?this.number:(this.number+1))
      this.money = this.number*this.detail.money
      if(this.number==numberMax){
        this.$vux.toast.show({
          text: '该商品24个小时内只能购买3张!',
          type: "warn",
          width: "auto"
        });
      }
      if(this.number<this.bussDataDetail.pinkageTerm){
        this.totalMoney = this.addNum(this.money,this.bussDataDetail.freight)
      }else{
        this.totalMoney = this.money
      }
      this.getNum()
      
    },
    addNum (num1, num2) {
         var sq1,sq2,m;
          try {
            sq1 = num1.toString().split(".")[1].length;
         }
         catch (e) {
           sq1 = 0;
         }
         try {
          sq2 = num2.toString().split(".")[1].length;
        }
        catch (e) {
          sq2 = 0;
        }
        m = Math.pow(10,Math.max(sq1, sq2));
        return (num1 * m + num2 * m) / m;
    },
    getNum() {
      let url =
        `${this.$CONSTANT.GOODS.payorderNum}?goodId=${this.detail.id}&quotaNum=3&buyNum=${this.number}&sessionId=${
        this.$common.getCookie("sessionId")}`
      this.$common.post(url, {}, res => {
        let data = res.data.bussData
        this.state = data
      });
    },
    reduce(){
      this.number=(this.number>1?(this.number-1):1)
      this.money = this.number*this.detail.money
       if(this.number<this.bussDataDetail.pinkageTerm){
         this.totalMoney = this.addNum(this.money,this.bussDataDetail.freight)
      }else{
        this.totalMoney = this.money
      }
      this.getNum()
    },
    openPicker() {
      this.$refs.picker.open();
    },
    handleConfirm(val){
      this.ddate = this.$common.dateFormate(val).substr(0,10)
    },
    pay(type) {
      // type 1卡券（普通用户专属）
      //      2余点（定制用户专属）
      let url =
        this.$CONSTANT.PAY.weixinPrepay +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      var couponId = this.postCList.map(item=>{
        return item.id
      })
      // couponId=couponId.length>0?couponId.join(','):''
      var couponPrice = [],couponIdArr=[]
      var needCouponPay = 0
      this.postCList.forEach(element => {
        if(this.totalMoney>needCouponPay){ // 3    1 44 5
          needCouponPay+=element.useMoney
          if(this.totalMoney>needCouponPay){
            couponPrice.push(element.useMoney)
            couponIdArr.push(element.id)
          }else{
            couponPrice.push(element.useMoney-needCouponPay+this.totalMoney)
            couponIdArr.push(element.id)
          }
        }
      });
      couponId = couponIdArr.length>0?couponIdArr.join(','):''
      couponPrice=couponPrice.length>0?couponPrice.join(','):''
      let param = {
        esPayOrderDetailSaveParams: [
          {
            brandName: this.bussDataDetail.brandDTO
              ? this.bussDataDetail.brandDTO.brandName
              : "",
            categoryName: this.bussDataDetail.categoryDTO
              ? this.bussDataDetail.categoryDTO.categoryName
              : "",
            goodsId: this.bussDataDetail.id,
            goodsName: this.bussDataDetail.goodsName,
            goodsType: this.bussDataDetail.type,
            nums: this.number,
            model: this.model,
            price: this.detail.money
          }
        ],
        address: this.detail.address?this.detail.address:'无',
        couponId, //普通用户才会有的
        couponPrice,
        mobile: this.detail.phone?this.detail.phone:'无',
        sendTime:this.goodtype=='real'?this.ddate:'',
        remark:this.goodtype=='real'?this.dtime:'',
        orderType: this.bussDataDetail.type,
        payPrice: this.payPrice === 0 ? "0" : this.payPrice, //"微信支付金额，如果为0则传0",
        payType: this.payType, // payType:'weixin,coins',//支付方式（weixin：微信支付；coins：余额；coupon：卡券）,多个用逗号隔开
        totalPrice: this.totalMoney,
        trueName: this.detail.name?this.detail.name:'无',
        userId: this.userId,
        deliveryTime:this.bussDataDetail.deliveryTime == '配送日'?'2000-01-01'+' '+this.deliveryTime+':00':this.ddate+' '+this.startTime,
        deliveryDay:this.deliveryDay,
        freight:this.bussDataDetail.freight
      };
      if(this.goodtype!='real'){
        param.deliveryTime = ''

      }
      this.$vux.loading.show({
        text: "正在提交订单",
        width: "auto"
      });
      setTimeout(() => {
        this.$common.post(url, param, res => {
          this.$vux.loading.hide();
          if (res.status == 200) {
            var bussData = res.data.bussData;
            if (this.payType.includes("weixin")) {
              //调微信支付
              this.wxpayf(bussData);
            } else {
              this.$vux.toast.show({
                text: res.msg,
                type: "",
                width: "auto"
              });
              setTimeout(() => {
                if(this.bussDataDetail.type == 'real'){
                   this.$router.replace("/order?type=1");
                }else{
                  this.$router.replace("/ticket?type=0");
                }
               
              }, 1000);
            }
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: "auto"
            });
          }
        });
      }, 500);
    },
    payM() {
      this.getPandT();
      this.pay();
    },
    getPandT() {
      //获取支付类型 payType 获取微信支付价格 this.payPrice
      if (localStorage.getItem("userType") == "normal") {
        if (this.couponidArr.length>0) {
          var checkCTotalMoney = 0
          this.Clist.forEach(element => {
            this.couponidArr.forEach(element2 => {
              if(element2 == element.id){
                checkCTotalMoney+=element.useMoney
              }
            });
          });
          if (
            checkCTotalMoney >= this.totalMoney
          ) {
            this.payType = "coupon";
            this.payPrice = 0;
          } else {
            this.payType = "weixin,coupon";
            this.payPrice = this.totalMoney -checkCTotalMoney
          }
          
        } else {
          this.payType = "weixin";
          this.payPrice = this.totalMoney;
        }
      } else if (localStorage.getItem("userType") == "special") {
        if (this.yudian) {
          if (this.yudian >= this.totalMoney) {
            this.payType = "coins";
            this.payPrice = 0;
          } else {
            this.payType = "weixin,coins";
            this.payPrice = this.totalMoney - this.yudian;
          }
        } else {
          this.payType = "weixin";
          this.payPrice = this.totalMoney;
        }
      }
      this.payPrice = parseFloat(this.payPrice.toFixed(2));
    },
    wxpayf(bussData) {
      var that = this;
      wx.chooseWXPay({
        timestamp: bussData.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: bussData.noncestr, // 支付签名随机串，不长于 32 位
        package: bussData.packageDesc, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: bussData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: bussData.sign, // 支付签名
        success: function(res) {
          // 支付成功后的回调函数
          that.$vux.toast.show({
            text: "支付成功",
            type: "",
            width: "auto"
          });
          setTimeout(() => {
            if(that.bussDataDetail.type == 'real'){
                that.$router.replace("/order?type=1");
            }else{
              that.$router.replace("/ticket?type=0");
            }
          }, 1000);
        },
        cancel: function(res) {
          that.$vux.toast.show({
            text: "用户取消支付",
            type: "cencel",
            width: "auto"
          });
          setTimeout(() => {
            that.$router.back()
          }, 1000);
        },
        // 支付失败回调函数
        fail: function(res) {
          that.$vux.toast.show({
            text: "支付失败",
            type: "warn",
            width: "auto"
          });
          setTimeout(() => {
            that.$router.replace("/order?type=0");
          }, 1000);
        }
      });
    },
    findEsShopUserCoreById() {
      let url =
        this.$CONSTANT.MY.findByUserPrice +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {};
      this.$common.post(url, param, res => {
        this.isloading = true;
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.yudian = bussData.price;
          this.getPandT();
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    showPay() {
      if(!this.state&&this.goodtype=='third'){
        this.$vux.toast.show({
            text: '该商品24个小时内只能购买3张!',
            type: "warn",
            width: 'auto'
          });
          return
      }
      if(this.goodtype=='real'){
        if(!this.deliveryDay&&this.bussDataDetail.deliveryTime == '配送日'){
           this.$vux.toast.show({
            text: '请选择配送时间',
            type: "warn",
            width: 'auto' 
          });
          return
        }
        if(this.bussDataDetail.deliveryTime != '配送日'){
          if(!this.startTime){
            this.$vux.toast.show({
              text: '请选择配送时间段',
              type: "warn",
              width: 'auto' 
            });
            return
          }
        }
        let {provinceCode,cityCode,districtCode} = this.detail
        let info = this.bussDataDetail,noArea
        if(info.province != '全省'){
          if(info.province!=provinceCode||info.city!=cityCode){
            this.$vux.alert.show({
                title: '提示',
                content: '已超出此商品的配送区域',
                buttonText:'我知道了',
                onShow () {
                  console.log('Plugin: I\'m showing')
                },
                onHide () {
                  console.log('Plugin: I\'m hiding now')
                }
              })
            return
          }
          if(info.isDistributionArea == 'y'){
            noArea = info.nonDistributionArea?info.nonDistributionArea.split(','):[]
            if(noArea.includes(districtCode)){
            this.$vux.alert.show({
                title: '提示',
                content: '已超出此商品的配送区域',
                buttonText:'我知道了',
                onShow () {
                  console.log('Plugin: I\'m showing')
                },
                onHide () {
                  console.log('Plugin: I\'m hiding now')
                }
              })
              return
            }
          }
        }
        // if(!this.dtime || this.ddate == '选择配送日期'){
        if(this.ddate == '选择配送日期'){
          this.$vux.toast.show({
            text: "请完善您的配送信息",
            type: "warn",
            width: 'auto'
          });
          return;
        }
      }
      if (!this.detail.phone&&this.bussDataDetail.type == 'real') {
        this.$vux.toast.show({
          text: "暂无地址数据，请前往新增地址",
          type: "warn",
          width: "auto"
        });
        return
      }
      if (localStorage.getItem("userType") == "normal") {
        if (this.Clist.length > 0) {
          this.showCoupon = true;
        } else {
          this.getPandT();
          this.showCouponPay = true;
        }
      } else if (localStorage.getItem("userType") == "special"){
        this.getPandT();
        this.showMoneyPay = true;
      }
    },
    Cclick() {
      this.getPandT();
      this.showCoupon = false;
      this.showCouponPay = true;
    },
    // 从小到大顺序排序
    minSort (arr) {
      var min
      for (var i = 0; i < arr.length; i++) {
        for (var j = i; j < arr.length; j++) {
          if (new Date(arr[i].date) > new Date(arr[j].date)) {
            min = arr[j]
            arr[j] = arr[i]
            arr[i] = min
          }
        }
      }
      return arr
    },
    chooseC(item, index) {
      this.postCList = []
      if(this.cchooseindexArr.indexOf(index)==-1){
        // 过期时间 由小到大排列
        // date new Date()
        this.cchooseindexArr.push(index)
      }else {
        this.cchooseindexArr.splice(this.cchooseindexArr.indexOf(index),1)
      }
      this.cchooseindexArr.forEach(element => {
        this.postCList.push(this.Clist[element])
      });

      if(this.couponidArr.indexOf(item.id)==-1){
        this.couponidArr.push(item.id)
      }else {
        this.couponidArr.splice(this.couponidArr.indexOf(item.id),1)
      }
      if(this.postCList.length>1){
        this.postCList=this.minSort(this.postCList)
      }
    },
    CclickCancel() {
      this.cchooseindexArr = [];
      this.couponidArr = [];
      this.getPandT();
      setTimeout(() => {
        this.showCoupon = false;
        this.showCouponPay = true;
      }, 300);
    },
    getClist(bussData) {
      let url =
        this.$CONSTANT.COUPON.findEsCouponByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        pageIndex: 1,
        pageSize: 1000,
        status: "o",
        // brandId: bussData.brandDTO.id,
        // categoryId: bussData.categoryDTO.id,
        userId: this.userId
      };
      this.$common.post(url, param, res => {
        this.isloading = true;
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          if (bussData.length === 0) {
          } else {
            bussData.forEach(element => {
              var validTime = Date.parse(new Date(element.validTime.replace(/-/g, '/')))
              if (validTime > Date.parse(new Date())) {
                if (element.restPrice > 0) {
                  this.Clist.push({
                    totalMoney: element.price,
                    useMoney: element.restPrice,
                    date: element.validTime,
                    id: element.id
                  });
                }
              }
            });
            if(this.Clist.length>0){
              // this.cchooseindexArr=[0]
              this.chooseC(this.Clist[0],0)
            }
          }
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    getAList() {
      if (this.$route.query.type == 'choose'){
        this.detail = {
          name: localStorage.getItem("orderConName")||'', // 收货人
          phone: localStorage.getItem("orderConPhone")||'', //收货人mobile
          address: localStorage.getItem("orderConAddress")||'', //地址
          provinceCode: localStorage.getItem("provinceCode")||'', // 收货人
          cityCode: localStorage.getItem("cityCode")||'', //收货人mobile
          districtCode: localStorage.getItem("districtCode")||'', //地址
          img: "",
          title: "",
          money: "",
          id: ""
        }
        return
      } ;
      let url =
        this.$CONSTANT.ADDRESS.findEsUserAddressByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        isDefault: "y",
        pageIndex: 1,
        pageSize: 1,
        userId: this.userId
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          if (bussData.length === 0) {
            this.detail.name = "暂无地址数据，点击前往新增地址";
          } else {
            this.detail.name = bussData[0].recieveName;
            this.detail.phone = bussData[0].mobile;
            this.detail.address = bussData[0].address;
            this.detail.provinceCode = bussData[0].province;
            this.detail.cityCode = bussData[0].city;
            this.detail.districtCode = bussData[0].district;
            localStorage.setItem("orderConName", this.detail.name);
            localStorage.setItem("orderConPhone", this.detail.phone);
            localStorage.setItem("orderConAddress", this.detail.address);
            localStorage.setItem('provinceCode',this.detail.province)
            localStorage.setItem('cityCode',this.detail.city)
            localStorage.setItem('districtCode',this.detail.district)
          }
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    getDetail() {
      let url =
        this.$CONSTANT.GOODS.findEsGoodsById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        id: this.detail.id
      };
      //this.$vux.loading.show({
      //   text: "loading"
      // });
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.bussDataDetail = bussData;
          this.detail.title = bussData.goodsName;
          this.isOn = bussData.isOn
          this.detail.img =
            bussData.photos.length > 0 ? bussData.photos[0].fileUrl : "";
          this.detail.money = bussData.price
          if(bussData.type=='real'){
            this.detail.money=parseFloat(localStorage.getItem('buy_specs'))
          }else if (bussData.type=='third'){
            this.getNum()
          }
          if(this.number<this.bussDataDetail.pinkageTerm){
            this.totalMoney = this.addNum(this.detail.money,this.bussDataDetail.freight)
          }else{
            this.totalMoney = this.detail.money
          }
          this.goodtype = bussData.type;
          if (localStorage.getItem("userType") == "normal") {
            this.getClist(bussData);
          } else {
            this.findEsShopUserCoreById();
          }
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    JumpAddress() {
      this.$router.push({
        path: "/chooseAddress?id="+this.$route.query.id
      });
    }
  },
  components: {
    Popup,
    XDialog,
    Group,
    LoadMore,
    
  }
};
</script>

<style lang="less">
#confirmOrder {
  .tip-desc{
    // height:65.5px;
    background:rgba(255,239,240,1);
    padding:0 15px;
    font-size:12px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height: 20px;
  }
  .deliveryTime{
    background-color: #fff;
    margin-top: 10px;
    padding-bottom: 2rem;
    .deliveryTime-name{
      font-size:13px;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(51,51,51,1);
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
    }
    textarea{
      width:335px;
      height:239px;
      background:rgba(246,247,249,1);
      border-radius:2px;
      padding:10px;
      margin-left: 10px;
      font-size:14px;
      font-family:PingFang SC;
      font-weight:500;
      border: 0px;
      color:rgba(189,189,189,1);
    }
  }
  .deliveryDate{
    .deliveryDate-span{
      width: 3rem;
      text-align: right;
    }
    .deliveryDate-date{
      float: right;
      display: flex;
      align-items: center;
      .line{
        margin: 0 5px;
      }
      .deliveryDate-list{
        width: 44px;
        height: 36px;
        text-align: center;
        border-bottom: 2px solid #ddd;
      }
      img{
        width: 5px;
        height: 9px;
      }
    }
    select{
      border:1px solid #ddd;
      height: 25px;
      width: 110px;
      background-color: #fff;
      text-align: right;
      &:focus{
        outline: 0;
      }
    }
  }
  .top {
    .one {
      background: #fff;
      position: relative;
      img.img1 {
        width: 13px;
        height: 15px;
        vertical-align: middle;
        float: left;
        position: absolute;
        top: 34px;
        left: 11px;
      }
      p {
        padding: 20px 39px;
        span.name {
          font-family: PingFang-SC-Bold;font-weight: 600;
          font-size: 15px;
          color: #333;
        }
        .address {
          display: block;
          font-family: PingFang-SC-Medium;
          font-size: 13px;
          color: #333;
          margin-top: 0px;
        }
        .phone {
          font-family: PingFang-SC-Bold;font-weight: 600;
          font-size: 15px;
          color: #333;
          margin-left: 11px;
        }
      }
      img.img2 {
        float: right;
        width: 5px;
        height: 9px;
        position: absolute;
        top: 39px;
        right: 10px;
      }
    }
    .two {
      background: #fff;
      margin-top: 8px;
      padding: 22px 11px;
      position: relative;
      img {
        position: absolute;
        top: 22px;
        left: 11px;
        width: 26.6%;
        height: 94px;
        border: 1px solid transparent;
        border-radius: 3px;
        margin-right: 15px;
        object-fit: contain;
        display: inline-block;
      }
      .detail {
        display: inline-block;
        width: 65.1%;
        vertical-align: top;
        position: relative;
        height: 96px;
        margin-left: 33%;
        p {
          color: #333;
          font-size: 13px;
          font-family: PingFang-SC-Medium;
        }
        span {
          margin-top: 41px;
          color: #ea030b;
          font-size: 14px;
          font-family: PingFang-SC-Bold;font-weight: 600;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
    .three{
      margin-top: 10px;
      background: #fff;
      color: #333;
      font-size: 13px;
      font-family: PingFang-SC-Medium;
      padding: 0 10px;
      min-height: 48px;
      line-height: 48px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      .btnBox{
          float: right;
          font-size: 0;
          span{
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            display: inline-block;
            font-family: PingFang-SC-Medium;
            font-size: 14px;
            color: #666;
            margin-right: 3px;
          }
          .reduce{
            background: #F7F7F7;
          }
          .number{
            background: #EFEFEF;
          }
          .add{
            background: #EFEFEF;
          }
        }
      span{
        float: right;
      }
    }
    .four{
      margin-top: 10px;
      background: #fff;
      color: #333;
      font-size: 13px;
      font-family: PingFang-SC-Medium;
      padding: 0 10px;
      >div{
        min-height: 42px;
        line-height: 42px;
        span{
          float: right;
          img{
            margin-left: 10px;
            width: 5px;
            height: 9px;
            vertical-align: middle;
          }
        }
        input{
          float: right;
          text-align: right;
          padding: 0;
          padding-top: 10px;;
          border: none;
          color: #333;
          font-size: 13px;
          font-family: PingFang-SC-Medium;
          &::-webkit-input-placeholder{
            color: #999999;
          }
        }
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #EAEAEA;
    p {
      color: #333;
      font-size: 15px;
      font-family: PingFang-SC-Medium;
      float: left;
      margin-top: 16px;
      margin-left: 11px;
      span {
        color: #ea030b;
      }
    }
    a {
      display: inline-block;
      float: right;
      height: 38px;
      width: 29.3%;
      text-align: center;
      line-height: 38px;
      background: #ee3c4a;
      color: #fff;
      font-size: 13px;
      font-family: PingFang-SC-Bold;font-weight: 600;
      margin: 9px 10px 9px 0;
      border: 1px solid transparent;
      border-radius: 19px;
    }
  }
}
// .v-transfer-dom {
.vux-popup-dialog {
  background: transparent;
}
.couponPayHide,
.moneyPayHide {
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.5;
  }
  .content {
    position: fixed;
    top: 81px;
    width: 72.3%;
    left: 14.4%;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #fff;
    .one {
      border-bottom: 1px solid #e2e2e2;
      height: 45px;
      line-height: 45px;
      font-family: PingFang-SC-Medium;
      font-size: 16px;
      color: #333;
      text-align: center;
      // padding-left: 18px;
      img {
        width: 12px;
        height: 12px;
        float: left;
        position: absolute;
        top: 16px;
        left: 18px;
      }
      span{
          display: inline-block;
          font-size: 16px;
          color: #666;
          position: absolute;
          top: 0px;
          left: 21px;
        }
    }
    .two {
      h2 {
        font-family: PingFang-SC-Bold;font-weight: 600;
        margin-top: 33px;
        margin-bottom: 39px;
        color: #333;
        font-size: 15px;
        text-align: center;
      }
      .balance {
        padding: 0 17px;
        span {
          font-family: PingFang-SC-Medium;
          color: #999;
          font-size: 14px;
          float: left;
          &:last-child {
            float: right;
            color: #333;
          }
        }
      }
      .notEnough {
        margin: 0 7px;
        background: #ffeff0;
        font-family: PingFang-SC-Medium;
        color: #333;
        font-size: 12px;
        // height: 42px;
        line-height: 42px;
        padding-left: 10px;
        img {
          width: 14px;
          height: 12px;
          vertical-align: middle;
          // padding-left: 4px;
        }
      }
      div {
        margin: 48px 0 21px;
        text-align: center;
        a {
          display: inline-block;
          height: 34px;
          width: 40%;
          text-align: center;
          line-height: 34px;
          background: #ee3c4a;
          color: #fff;
          font-size: 13px;
          font-family: PingFang-SC-Bold;font-weight: 600;
          border: 1px solid transparent;
          border-radius: 23px;
          &:last-child {
            background: #ededed;
            margin-left: 8px;
          }
        }
      }
    }
  }
}
.couponPayHide {
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.5;
  }
  .content {
    .two {
      h2 {
        width: 58.6%;
        margin: 33px auto 39px;
      }
      .notEnough {
        text-align: left;
        background: #fff;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        margin: 0 12px;
        padding-right: 10px;
        span {
          float: right;
        }
      }
    }
  }
}
.confirmOrder {
  border: 1px solid transparent;
  border-radius: 5px;
  &:before,
  &:after {
    border: none;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.5;
  }
  .content {
    height: 7rem;
    overflow: scroll;
    position: relative;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    .coupon {
      h3 {
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-family: PingFang-SC-Medium;
        font-size: 16px;
        color: #333;
        position: relative;
        border-bottom: 1px solid #e2e2e2;
        img {
          width: 12px;
          height: 12px;
          position: absolute;
          top: 21px;
          left: 21px;
        }
        span{
          display: inline-block;
          font-size: 16px;
          color: #666;
          position: absolute;
          top: 0px;
          left: 21px;
        }
      }
      .one {
        position: relative;
        padding: 25px 21px 9px;
        .radioimg {
          display: inline-block;
          width: 15px;
          height: 15px;
          position: absolute;
          top: 63px;
          right: 26px;
          background: #fff;
          border: 1px solid #ff3d55;
          border-radius: 50%;
          &::before {
            display: inline-block;
            content: "";
            width: 1px;
            height: 6px;
            background: #fff;
            transform: rotate(-45deg);
            position: absolute;
            top: 5px;
            right: 10px;
          }
          &::after {
            display: inline-block;
            content: "";
            width: 1px;
            height: 11px;
            background: #fff;
            transform: rotate(45deg);
            position: absolute;
            top: 2px;
            right: 4px;
          }
        }
        .radioimgactive {
          &::after,
          &::before {
            background: #ff3d55;
          }
        }
        > img {
          width: 15px;
          height: 15px;
          position: absolute;
          top: 63px;
          right: 26px;
        }
        .cover-img{
          display: inline-block;
          z-index: 999;
            width: 35px;
          height: 35px;
          position: absolute;
          top: 53px;
          right: 20px;
        }
        .item {
          display: inline-block;
          width: 82.8%;
          height: 92px;
          font-size: 0px;
          position: relative;
          > img {
            width: 100%;
            height: 92px;
            position: absolute;
            top: 0px;
            right: 0px;
          }
          .left {
            width: 66%;
            display: inline-block;
            text-align: center;
            position: relative;
            p {
              padding-top: 14px;
              height: 40px;
              span {
                font-family: PingFang-SC-Medium;
                font-size: 17px;
                color: #fff;
              }
              .money {
                font-family: MicrosoftYaHei;
                font-size: 25px;
              }
              .balance {
                font-family: PingFang-SC-Regular;
                font-size: 11px;
              }
              &:last-child {
                font-family: PingFang-SC-Regular;
                font-size: 12px;
                padding-top: 4px;
                color: #ffe19f;
              }
            }
          }
          .right {
            width: 34%;
            display: inline-block;
            text-align: center;
            position: relative;
            span {
              display: block;
              font-family: PingFang-SC-Regular;
              font-size: 15px;
              color: #ffffff;
              position: relative;
              top: -10px;
              &:last-child {
                top: 0;
                font-size: 10px;
              }
            }
          }
        }
      }
    }
    .btn {
      text-align: center;
      padding-top: 42px;
      padding-bottom: 23px;
      background: #fff;
      a {
        display: inline-block;
        height: 34px;
        width: 28.8%;
        line-height: 34px;
        text-align: center;
        border: 1px solid transparent;
        border-radius: 17px;
        font-family: PingFang-SC-Bold;font-weight: 600;
        font-size: 13px;
        &:first-child {
          background: #ee3c4a;
          color: #fff;
        }
        &:last-child {
          margin-left: 10px;
          background: #ededed;
          color: #999;
        }
      }
    }
  }
}
// }
</style>
